<template>
  <div class="demo-image__preview">
    <!-- {{ $store.state.Base64List }} -->
    <el-image
      v-for="item in List"
      style="width: 150px; height: 150px"
      :src="item"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :initial-index="4"
      :preview-src-list="List"
      fit="cover"
      alt="Base64 Image"
    />
    <!-- <el-button @click="han">点击</el-button> -->
    <!-- <div v-for="(item, index) in base64PhotoLists" :key="index">{{ item }}</div> -->
  </div>
</template>
<!-- v-for="item in $store.state.Base64List" -->
<script setup>
import { ref,computed, onMounted, watch } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

//此时，watch的用法我在实战中也成功运用
const List = ref([])
watch(()=> store.state.Base64List.value,
(newValue)=>{
  List.value = newValue 
},{
 immediate: true,
 deep: true
})
// console.log(List.value)
// const photoLists = ref([]);
    // 假设store.state.Base64List是已经存在的state中的属性
    // const base64List = store.state.Base64List;
    // 使用.map()方法转换Base64List数组中的每一项
    // photoLists.value = base64List.map(item => 'data:image/jpg;base64,' + item);
  // watch(store.state.Base64List,(newValue,oldValue) => {
  //   // console.log(oldValue,'to',newValue)
  //    store.state.Base64List.map(item => 'data:image/jpg;base64,' + item)
  //   // return photoLists
  // },{
  //    deep: true,
  //    immediate: true
  // })
// })
// console.log(store.state.Base64List)
// const url = ''

// data:image/jpg;base64,
// const photoList = store.state.Base64List.value
// // // store.state.Base64List
// // console.log(photoList)
// // const Lists = ref({
// //   // 假设 photoList 是一个响应式的数据源
// //   photoList
// // });
// // console.log(Lists.value.photoList)
// // const han = () =>{
// //   photoList.value = ['1','2',"89"]
// // }
// // setInterval(() => {
// //   Lists.value.push('1')
// // }, 1000);
// const Lists = ref({
//   photoList
// });

// const  photoLists = ref('a')
// var arr =  ref('b')
// watch(arr,(n,o)=>{
//   photoLists.value = n
// })
// // photoLists.value = arr.value

// arr.value = 'c'
// arr.value = "d"



// photoLists.value = Lists.value.photoList.map(item => 'data:image/jpg;base64,' + item)
// Lists.value.photoList.map(item => 'data:image/jpg;base64,' + item)
// console.log(photoLists)

// const a = ref([a])a.value.a
// const a = computed()
// const b =  ref()

// 创建一个计算属性来处理 photoList 并转换为 base64 格式的字符串数组
// const base64PhotoLists = computed(() => {
//   // console.log(Lists.value.photoList[0])
//   // console.log('1111')
//   // for(let i of Lists.value.photoList){
//   //   console.log(i)
//   // }
//   console.log(store.state.Base64List.value)
//   if(!store.state.Base64List.value){
//     store.state.Base64List.value = []
//   }
  // return store.state.Base64List.value
  
//   return store.state.Base64List.value.map(item => {

//     return 'data:image/jpg;base64,' + item
//   })
//  })
// console.log(base64PhotoLists)
// setInterval(()=>{
//   watch(() => photoLists, (newValue, oldValue) => {
//       // 当数组变化时，可以在这里执行一些操作
//       // 例如，可以调用一个方法或者更新另一个响应式引用
//       // const Listsd = newValue
//       console.log(oldValue, 'to', newValue)
//     }, {
//       immediate: true, // 初始时也执行一次监听
//       deep: true     // 如果数组内部有对象，深度监听
//     });
// },2000)
// ['';
</script>

<style scoped>

/* .demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
} */
:deep(.el-image__inner) {
 padding: 5px;
}
</style>
